<template>
  <video
    ref="videoEl"
    controls
    autoplay
    muted
    style="width: 100%; max-height: 500px"
  ></video>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import Hls from 'hls.js'

const videoEl = ref(null)
let hls = null

onMounted(() => {
  const url = 'http://localhost:8080/hls/Camera1.m3u8'
  if (Hls.isSupported()) {
    hls = new Hls()
    hls.loadSource(url)
    hls.attachMedia(videoEl.value)
    hls.on(Hls.Events.ERROR, (e, data) => {
      console.error('HLS 错误', data)
    })
  } else if (videoEl.value.canPlayType('application/vnd.apple.mpegurl')) {
    // iOS Safari 原生支持
    videoEl.value.src = url
  } else {
    alert('浏览器不支持 HLS')
  }
})

onUnmounted(() => {
  hls?.destroy()
})
</script>